<template>
  <div>
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTop>
        <div>
          <a-alert banner :message="alertMsg" />
        </div>
      </template>
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 新增</a-button>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleRefund"> 退款查询</a-button>
        <!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls" disabled> 导出</a-button>
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> -->
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="emp-est01" setup>
import { ref, onMounted, reactive, } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, searchFormSchema } from './wxData';
import { list, deleteOne, deleteBatch, getImportUrl, getExportUrl, getOrder,getRefundOrder,confirmOrder,refundsOrder, } from './wxApi';
import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createConfirm, createMessage: $message } = useMessage();

const queryParam = reactive<any>({});

//注册table数据
const { tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    title: 'test02表',
    api: list,
    columns,
    canResize: false,
    showIndexColumn: true,        //显示行号
    immediate: true,             //自动请求
    formConfig: {
      //labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
      showAdvancedButton: true,
    },
    actionColumn: {
      width: 250,
      fixed: 'right',
    },
    beforeFetch: (params) => {
      return Object.assign(params, queryParam);
    },
  },
  exportConfig: {
    name: 'test02表',
    url: getExportUrl,
    params: queryParam,
  },
  importConfig: {
    url: getImportUrl,
    success: handleSuccess,
  },
});

const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;

const alertMsg = ref('');

// 默认执行一次
onMounted(async () => {
});

/**
 * 新增事件
 */
function handleAdd() {
  $message.info('新增了......');
}

/**
 * 订单查询
 */
async function handleOrderQuery(record) {
  let res = await getOrder(record.orderNo);
  // console.log('查询到订单数据为：', JSON.stringify(res));
  // "orderNo": "ORDER_20251122194842729", "weChatPayState": "SUCCESS"
  alertMsg.value = '查询的订单号为：'+res.orderNo +"  订单状态："+ res.weChatPayState
}

/**
 * 订单查询-退款
 */
 async function handleRefund(record) {
  let res = await getRefundOrder('REFUND_20251120123329359');
  // console.log('查询到订单数据为：', JSON.stringify(res));
  // "orderNo": "ORDER_20251122194842729", "weChatPayState": "SUCCESS"
  alertMsg.value = '查询的订单号为：'+res.orderNo +"  订单状态："+ res.weChatPayState
}

/**
 * 订单确定
 */
 async function handleOrderConfirm(record) {
  console.log('查询到订单数据为：', JSON.stringify(record));
  let res = await confirmOrder(record.id);
  handleSuccess();
}


/**
 * 订单退款
 */
 async function handleOrderRefund(record) {
  // console.log('查询到订单数据为：', JSON.stringify(record));
  let params = {
    id: record.id,
    reason: '不需要了'
  }
  let res = await refundsOrder(params);
  handleSuccess();
}


/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteOne({ id: record.id });
  handleSuccess();
}

/**
 * 批量删除事件
 */
/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  createConfirm({
    iconType: 'warning',
    title: '确认删除',
    content: '是否删除选中数据',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await deleteBatch({ ids: selectedRowKeys.value });
      handleSuccess();
    }
  });
}

/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}

/**
 * 表格操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '验单',
      onClick: handleOrderQuery.bind(null, record),
    },
    {
      label: '修正',
      onClick: handleOrderConfirm.bind(null, record),
    },
    {
      label: '退款',
      onClick: handleOrderRefund.bind(null, record),
      ifShow: record.orderStatus === '支付成功',
    },
    {
      label: '删除',
      color: 'error',
      popConfirm: {
        title: '是否确认删除',
        placement: 'left',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
</script>

<style lang="less" scoped>
:deep(.ant-picker),
:deep(.ant-input-number) {
  width: 100%;
}

.m-4 {
  background-color: #fff;
  padding-top: 20px;
  margin: 0px;
}
</style>./wxData